<template>
  <FileUpload
    ref="uploadRef"
    :files="fileList"
    :limit="1"
    @success="onUploadSuccess"
    @remove="onRemove"
    @all="onAll"
  />
  <el-button @click="submit">提交</el-button>
</template>

<script setup lang="ts">
import { ElMessage, type UploadFile, type UploadUserFile } from 'element-plus'
import { ref } from 'vue'

import FileUpload from '@/components/FileUpload.vue'

/**
 * 1.删除文件
 * 1.提交表单再上传
 * 2.支持已上传回显
 * 3.提交表单在删除和上传新文件
 */

const uploadRef = ref()
const removeList = new Set<string[]>([])
const fileList = ref<UploadUserFile[]>([
  {
    name: 'driving.png',
    status: 'success',
    uid: '1111'
  }
])

const form = ref({
  fileId: '1111'
})

const submit = async () => {
  console.log('待删除文件:', removeList)

  // 1.上传文件
  if (uploadRef.value.getWaitFileLength() > 0) {
    await uploadRef.value.upload()
    return
  }

  // 2.验证表单
  if (form.value.fileId === '') {
    ElMessage.warning('请先上传文件')
    return
  }

  console.log('处理完毕，发送表单')
  ElMessage.success('发送表单')
}

const onUploadSuccess = (fileId: string) => {
  console.log(`文件Id:${fileId}`)
  form.value.fileId = fileId
}

const onRemove = (fileId: string) => {
  form.value.fileId = ''
  console.log('删除文件:', fileId)
  removeList.add(fileId)
}

const onAll = () => {
  submit()
}
</script>

<style scoped></style>
